<template>
  <div class="list">
    <search-panel @searchData="searchData" @resetData="resetData">
      <template #searchSlot>
        <slot name="searchSlot"></slot>
      </template>
    </search-panel>
    <el-card class="table-panel">
      <!-- 操作按钮，位于表格左上角 -->
      <div class="operateBtns">
        <slot name="operateBtnsSlot" :selectData="selectData"></slot>
      </div>
      <table-panel
          :tableData="data.tableData"
          :operateColumnWidth="operateColumnWidth"
          :headers="headers"
          :isMultiSelect="isMultiSelect"
          :isHasOperateColumn="isHasOperateColumn"
          :total="data.total"
          @getSize="getSize"
          @getPage="getPage"
          @handleSelectionChange="handleSelectionChange"
      >
        <template #operateSlot="scope">
          <slot name="operateSlot" :row="scope.row"></slot>
        </template>
      </table-panel>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import {reactive, onMounted} from 'vue'
import request from "@/api";

interface tableHeaderType {
  prop: string
  label: string
  width?: number
  align?: string
  showOverflowTooltip?: boolean
  fixed?: boolean
}

interface ListProps {
  headers?: tableHeaderType[]
  isMultiSelect?: boolean
  isHasOperateColumn?: boolean
  modelValue: { [key: string]: any }
  searchUrl: string,
  operateColumnWidth?: number
}

const {headers, isHasOperateColumn, isMultiSelect, modelValue, searchUrl, operateColumnWidth} =
    defineProps<ListProps>()


const $emit = defineEmits()

const data = reactive({
  tableData: [],
  total: 0,
  params: {
    pageSize: 10,
    pageNum: 1
  }
})

const selectData = reactive({
  data: [],
  ids: []
})

onMounted(() => {
  searchData()
})

const searchData = () => {
  selectData.data = [];
  selectData.ids = []
  const params = {
    ...modelValue,
    ...data.params
  }
  request.get<ListResponse>(`/api${searchUrl}`, {params}).then(res => {
    if (res.status === 0) {
      data.tableData = res.data.pageData
      data.total = res.data.total
    }
  })
}

const resetData = () => {
  Object.keys(modelValue).forEach(key => {
    modelValue[key] = ''
  })
  $emit('update:modelValue', modelValue)
  searchData()
}

const getSize = (pageSize: number) => {
  data.params.pageSize = pageSize
  searchData()
}

const getPage = (pageNum: number) => {
  data.params.pageNum = pageNum
  searchData()
}

const handleSelectionChange = (selection: any) => {
  console.log(selection);
  selectData.data = selection
  selection.forEach((item: any) => {
    if (!selectData.ids.includes(item.id)) {
      selectData.ids.push(item.id)
    }
  })
}

defineExpose({
  searchData
})
</script>
<style scoped lang="scss">
.list {
  height: 100%;
  flex-direction: column;
  display: flex;

  .table-panel {
    overflow-y: auto;
    margin-top: 10px;
    flex: 1;

    :deep(.el-card__body) {
      padding-bottom: 20px;
      height: 100%;
      position: relative;
    }

    .operateBtns {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
  }
}
</style>
